<template>
    <div class="login">
        <a-form
            :form="form"
            @submit.prevent="doLogin"
        >
            <a-tabs
                size="large"
                :tab-bar-style="{textAlign: 'center'}"
                style="padding: 0 2px;"
                :active-key="activeKey"
                @change="handleTabsChange"
            >
                <a-tab-pane
                    key="1"
                    tab="账户密码登录"
                >
                    <a-alert
                        v-show="error"
                        type="error"
                        :closable="true"
                        :message="error"
                        show-icon
                        style="margin-bottom: 24px;"
                    />
                    <a-form-item>
                        <a-input
                            v-decorator="['name',{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
                            size="large"
                        >
                            <a-icon
                                slot="prefix"
                                type="user"
                            />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input
                            v-decorator="['password',{rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
                            size="large"
                            type="password"
                        >
                            <a-icon
                                slot="prefix"
                                type="lock"
                            />
                        </a-input>
                    </a-form-item>
                </a-tab-pane>
            </a-tabs>
            <a-form-item>
                <a-button
                    :loading="loading"
                    style="width: 100%; margin-top: 4px"
                    size="large"
                    html-type="submit"
                    type="primary"
                >
                    登录
                </a-button>
            </a-form-item>
            <div>
                <a
                    style="float: right"
                    @click="regist"
                >注册账户</a>
            </div>
        </a-form>
    </div>
</template>

<script>
import {mapMutations} from 'vuex';

export default {
    name: 'Login',
    data() {
        return {
            loading: false,
            error: '',
            activeKey: '1',
            dicts: []
        };
    },
    computed: {
        systemName() {
            return this.$store.state.setting.systemName;
        },
        copyright() {
            return this.$store.state.setting.copyright;
        }
    },
    beforeCreate() {
        this.form = this.$form.createForm(this);
    },
    created() {
        this.$db.clear();
        this.$router.options.routes = [];
    },
    methods: {
        doLogin() {
            if (this.activeKey === '1') {
                // 用户名密码登录
                this.form.validateFields(['name', 'password'], (errors, values) => {
                    if (!errors) {
                        this.loading = true;
                        let name = this.form.getFieldValue('name');
                        let password = this.form.getFieldValue('password');
                        this.$api.login({
                            username: name,
                            password: this.$aesEncrypt.encrypt(password)
                        }).then((r) => {
                            let data = r.data.data;
                            this.saveLoginData(data);
                            setTimeout(() => {
                                this.loading = false;
                            }, 500);
                            this.getDicts();
                            this.$router.push('/');
                        }).catch((e) => {
                            console.error(e);
                            setTimeout(() => {
                                this.loading = false;
                            }, 500);
                        });
                    }
                });
            }
            if (this.activeKey === '2') {
                // 手机验证码登录
                this.$message.warning('暂未开发');
            }
        },
        regist() {
            this.$emit('regist', 'Regist');
        },
        getCaptcha() {
            this.$message.warning('暂未开发');
        },
        handleTabsChange(val) {
            this.activeKey = val;
        },
        ...mapMutations({
            setToken: 'account/setToken',
            setExpireTime: 'account/setExpireTime',
            setPermissions: 'account/setPermissions',
            setRoles: 'account/setRoles',
            setUser: 'account/setUser',
            setTheme: 'setting/setTheme',
            setLayout: 'setting/setLayout',
            setMultipage: 'setting/setMultipage',
            fixSiderbar: 'setting/fixSiderbar',
            fixHeader: 'setting/fixHeader',
            setColor: 'setting/setColor',
            setDicts: 'dict/setDicts'
        }),
        saveLoginData(data) {
            this.setToken(data.token);
            this.setExpireTime(data.exipreTime);
            this.setUser(data.user);
            this.setPermissions(data.permissions);
            this.setRoles(data.roles);
            this.setTheme(data.config.theme);
            this.setLayout(data.config.layout);
            this.setMultipage(data.config.multiPage === '1');
            this.fixSiderbar(data.config.fixSiderbar === '1');
            this.fixHeader(data.config.fixHeader === '1');
            this.setColor(data.config.color);
        },
        getDicts() {
            this.$api.getDicts()
                .then((r) => {
                    let data = r.data;
                    this.saveDictData(data);
                }).catch((e) => {
                    console.error(e);
                });
        },
        saveDictData(data) {
            this.setDicts(data);
        }
    }
};
</script>

<style lang="less" scoped>
	.login {

		.icon {
			font-size: 24px;
			color: rgba(0, 0, 0, .2);
			margin-left: 16px;
			vertical-align: middle;
			cursor: pointer;
			transition: color .3s;

			&:hover {
				color: #1890ff;
			}
		}
	}
</style>
